﻿@model BlogPost
@{
    ViewData["Title"] = "Blog";
    ViewData["UseCardTheme"] = true;
    Dictionary<int, BlogCommentVote> cv = ViewBag.CommentVote;
    BlogPostVote pv = ViewBag.PostVote;
    int.TryParse(User.GetUserId() ?? "-100", out int uid);

    async Task<string> DisplayComment(IEnumerable<BlogComment> comments, int level)
    {
        foreach (var comment in comments ?? Array.Empty<BlogComment>())
        {
<div class="comment-scope">
    <div class="comment-line">
        @for (int i = 0; i < level; i++) {<div class="comment-raquo">&raquo;</div>}
        <div class="comment media" id="C@(comment.Id)">
            <div class="comment-avatar mr-3 text-center">
                <div class="d-block"><img gravatar-email="@comment.UserDetail.Email" style="height:64px;width:64px" /></div>
                <user uid="@comment.UserId" username="@comment.UserDetail.UserName" />
            </div>
            <div class="media-body">
                <div class="comment-toolbar text-muted mb-1" style="font-size:0.8em">
                    <span>@Html.AutoUnitTimespan(DateTimeOffset.Now - comment.PublishTime) ago</span>,
                    <razor asp-show-if="comment.Revision > 1">rev. @comment.Revision,</razor>
                    <a class="text-muted text-decoration-none" asp-fragment="C@(comment.Id)" title="share this comment"><i class="far fa-share-square"></i></a>
                    <a class="text-muted text-decoration-none" asp-show-if="comment.ReplyToId.HasValue" href="#C@(comment.ReplyToId)" title="parent comment"><i class="far fa-caret-square-left"></i></a>
                    <a class="text-muted text-decoration-none" asp-show-if="comment.UserId == uid && !comment.IsDeleted" data-toggle="ajaxWindow" data-target="delete-comment" asp-action="DeleteComment" asp-route-postId="@comment.PostId" asp-route-commentId="@comment.Id" title="delete this comment"><i class="far fa-trash-alt"></i></a>
                    <a class="text-muted text-decoration-none" asp-show-if="!comment.IsDeleted" asp-in-roles="Administrator" asp-action="DeleteComment" data-toggle="ajaxWindow" data-target="delete-comment" asp-route-postId="@comment.PostId" asp-route-commentId="@comment.Id" title="ban this comment"><i class="fa fa-ban"></i></a>
                    <span class="float-right voting" id="C@(comment.Id)v"><partial name="VotingDetail" model="(comment.PostId, (int?)comment.Id, comment.UpVotes, comment.DownVotes, cv?.GetValueOrDefault(comment.Id)?.Up)" /></span>
                </div>
                <div class="comment-content">
                    @if (comment.IsDeleted)
                    {
                        @:<small style="color:rgba(127,0,0,0.4)">This comment has been deleted.</small>
                    }
                    else if (comment.UpVotes - comment.DownVotes < -40)
                    {
                        <small class="comment-hidden">
                            The comment is hidden because of too negative feedback, click <a class="neg-feedback-show" href="javascript:;">here</a> to view it.
                        </small>
                        <div class="comment-hidden d-none">
                            @Html.Raw(comment.ContentHtml)
                        </div>
                    }
                    else if (comment.UpVotes - comment.DownVotes < -10)
                    {
                        <div class="comment-hidden">
                            @Html.Raw(comment.ContentHtml)
                        </div>
                    }
                    else
                    {
                        @Html.Raw(comment.ContentHtml)
                    }
                </div>
                <p class="mb-0"><small><a href="javascript:;" class="text-muted replier" data-comment-id="@comment.Id">→ Reply</a></small></p>
            </div>
        </div>
    </div>
    @await DisplayComment(comment.Replies, level + 1)
</div>
        }
        return "";
    }
}

<link rel="stylesheet" href="/lib/site-blog/main.css" />

<div class="row">
<div class="container card-container">

<partial name="_StatusMessage" model="@TempData["StatusMessage"]" />
@{ TempData.Remove("StatusMessage"); }

<div class="card window-card container-fluid">
<div class="card-body">
<div class="blog-title">
    <h2><a class="text-decoration-none text-reset" asp-action="Entry" asp-controller="Blog" asp-route-postId="@Model.Id">@Model.Title</a></h2>
    <p class="mb-0">By <user uid="@Model.UserId" username="@Model.UserDetail.UserName" />, <span title="@Model.PublishTime">@Html.AutoUnitTimespan(DateTimeOffset.Now - Model.PublishTime) ago</span><razor asp-show-if="Model.Revision > 1">, revision @Model.Revision</razor><razor asp-show-if="Model.UserId.ToString() == User.GetUserId()">, <a asp-action="Publish">edit</a></razor>.</p>
</div>
<hr class="blog-line-separator" />
<div class="blog-content">
    @Html.Raw(Model.ContentHtml)
</div>
<hr class="blog-line-separator blog-line-separator-end" />
<p class="mb-0">
    <span class="voting" id="blog_vote_@(Model.Id)"><partial name="VotingDetail" model="(Model.Id, (int?)null, Model.UpVotes, Model.DownVotes, pv?.Up)" /></span>
</p>
</div>
</div>

<div class="card window-card container-fluid">
<div class="card-body">
<h3 class="mb-3">Comments</h3>
@await DisplayComment(Model.Comments, 0)

<div class="comment-leave-wrapper">
<div class="comment-leave">
    <p class="mb-0 mt-3"><a href="javascript:;" class="text-muted replier" data-comment-id="">→ Leave a comment</a></p>
</div>
</div>
</div>
</div>

</div>
</div>

<div class="d-none" id="replyTemplate">
    <form class="reply-content" asp-action="Comment" asp-route-postId="@Model.Id">
        <textarea class="form-control mt-2 mb-2" name="content" maxlength="1024" placeholder="My comments..."></textarea>
        <button type="submit" class="btn btn-primary btn-sm float-right">submit</button>
        <button type="reset" class="btn btn-secondary btn-sm float-right mr-2 canceller">cancel</button>
    </form>
</div>

<script type="text/javascript">
    $(function () {
        let $body = $('body');

        $body.on('click', '.voter.enabled', function () {
            notice('Your vote has been sent. It will be processed in a minute.');
            ajaxget($(this).data("href"), '#' + $(this).parent().prop('id'));
            return false;
        });

        $body.on('click', '.voter.disabled', function () {
            notice('You cannot vote twice. You have already voted for this comment before.', 'danger');
            return false;
        });

        $body.on('click', '.commentReplyTo button[type="reset"]', function () {
            let $commentReplyTo = $(this).parent().parent();
            $commentReplyTo.parent().find('.replier').attr('disabled', false);
            $commentReplyTo.remove();
            return false;
        });

        let initialReplyUrl = $('#replyTemplate form').prop('action');
        $body.on('click', '.replier', function () {
            if ($(this).attr('disabled')) return;
            $('#replyTemplate form').prop('action', initialReplyUrl + '?replyTo=' + $(this).data('comment-id'));
            let result = '<div class="commentReplyTo" data-comment-id="' + $(this).data('comment-id') + '">' + $('#replyTemplate').html() + '</div>';
            $(this).parent().parent().after(result);
            $(this).attr('disabled', true);
        });

        $body.on('click', '.neg-feedback-show', function () {
            $(this).parent().next().removeClass('d-none');
            $(this).parent().remove();
        });
    });
</script>
